<template>
    <div class="musicList">
        <div class="musicTop">
            <div class="title">发现好歌单</div>
            <div class="more">查看更多</div>
        </div>
        <div class="musicContent">
            <van-swipe :loop="false" :width="150" class="my-swiper" :show-indicators="false">
                <van-swipe-item v-for="item in state.musicList" :key="item">
                    <router-link :to="{path:'/itemMusic',query:{id:item.id}}">
                    <img :src="item.picUrl" alt=""/>
                    <span class="playCount">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-icon-24gl-play-copy"></use>
                        </svg>
                        {{changeCount(item.playCount)}}
                    </span>
                    <span class="name">{{item.name}}</span>
                    </router-link>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>
<script>
import { getMusicList } from '@/request/api/home';
import { reactive } from 'vue';
import { onMounted } from 'vue';
export default{
    //vue2写法
    // data(){
    //     return{
    //         musicList:[]
    //     }
    // },
    // methods:{
    //     async getGnedan(){
    //         let res=await getMusicList();
    //         console.log(res);
    //         this.musicList=res.data.result;
    //     },
    //     changeCount:function(num){
    //         if(num>100000000){
    //             return (num/100000000).toFixed(1)+'亿'
    //         }else if(num>=10000){
    //             return (num/10000).toFixed(1)+'万'
    //         }
    //     }
    // },
    // mounted(){
    //     this.getGnedan();
    // }

    //vue3写法
    setup(){
        const state=reactive({
            musicList:[],
        });
        function changeCount(num){
            if(num>100000000){
                return (num/100000000).toFixed(1)+'亿'
            }else if(num>=10000){
                return (num/10000).toFixed(1)+'万'
            }
        }
        onMounted(async ()=>{
            let res=await getMusicList();
            console.log(res);
            state.musicList=res.data.result;
        });
        return {state,changeCount};
    }
}
</script>
<style lang="less" scoped>
.musicList{
    width: 100%;
    height: 5rem;
    padding: 0.2rem;
    .musicTop{
        width: 100%;
        height: .6rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: .2rem;
        .title{
            font-size: .4rem;
            font-weight: 900;
        }
        .more{
            border: 1px solid #ccc;
            text-align: center;
            line-height: .6rem;
            padding: 0 0.2rem;
            border-radius: 0.4rem;
        }
    }
    .musicContent{
        width: 100%;
        height: 5rem;
        .my-swiper{
            height: 100%;
            img{
                width: 100%;
                height: 3rem;
            }
            .playCount{
                position: absolute;
                top: .1rem;
                left:1.04rem;
                color: #fff;
                display: flex;
                align-items: center;
                .icon{
                    width: .4rem;
                    height: .4rem;
                }
            }
        }
    }
}
</style>